<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        机构管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>机构业务 /
        支持银行
      </p>
      <div class="content">
        <div class="nav">
          <!-- <div class="nav_son">
            <span>已支持银行数：{{ bankNum }}</span>
          </div> -->
          <div class="nav_son1">
            <el-button style="float:left" type="primary" @click="opening()"
              >添加银行</el-button
            >
            <el-form
              ref="form"
              style="float:right"
              :model="form"
              label-width="100px"
            >
              <el-form-item label="支持状态">
                <el-select
                  v-model="form.region"
                  placeholder="请选择活动区域"
                  @change="list"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option label="支持" value="0"></el-option>
                  <el-option label="不支持" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="tables">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '0px' }"
            :total="bankNum"
          >
            <el-table-column type="selection" width=""></el-table-column>
            <el-table-column label="银行卡类型" width="">
              <template slot-scope="scope">
                <span v-if="scope.row.cardType == 0">代付</span>
                <span v-if="scope.row.cardType == 1">支付</span>
                <span v-if="scope.row.cardType == 2">代付加支付</span>
                <!-- <el-button size="mini" @click="bank(scope.row,scope.row.uid,scope.row.name)">支持银行</el-button> -->
                <!-- <el-button size="mini" @click="shangyips(2,scope.row.uid,scope.row.agtType)">权益记录</el-button> -->
              </template>
            </el-table-column>
            <el-table-column label="银行卡支付状态" width="" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">支持</span>
                <span v-if="scope.row.status == 1">不支持</span>
                <!-- <el-button size="mini" @click="bank(scope.row,scope.row.uid,scope.row.name)">支持银行</el-button> -->
                <!-- <el-button size="mini" @click="shangyips(2,scope.row.uid,scope.row.agtType)">权益记录</el-button> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="bankName"
              label="支持银行"
              width=""
              align="center"
            ></el-table-column>
            <el-table-column
              prop="bankCode"
              label="银行编号"
              width=""
              align="center"
            ></el-table-column>
            <el-table-column
              prop="d0DrawFee"
              label="机构d0手续费(元)"
              width=""
              align="center"
            ></el-table-column>
            <el-table-column
              prop="d0TradeRate"
              label="机构d0交易费率(%)"
              width=""
              align="center"
            ></el-table-column>
            <!-- <el-table-column
          prop="phone"
          label="商户d0手续费"
          width=""
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="商户d0交易费率"
          width=""
          align="center"
        ></el-table-column> -->
            <el-table-column
              prop="singleLowest"
              label="单笔最低限额"
              width=""
              align="center"
            ></el-table-column>
            <el-table-column
              prop="singleLimit"
              label="单笔最高限额"
              width=""
              align="center"
            ></el-table-column>
            <el-table-column
              prop="dayLimit"
              label="单卡单日限额"
              width=""
              align="center"
            ></el-table-column>
            <el-table-column
              prop="monthLimit"
              label="单卡单月限额"
              width=""
              align="center"
            ></el-table-column>
            <el-table-column
              prop="dayLimit"
              label="单卡单日交易笔数限制"
              width=""
            ></el-table-column>
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                type="text"
                  size="mini"
                  @click="handleEdit(scope.row, scope.row.uid, scope.row.name)"
                  >修改</el-button
                >
                <!-- <el-button size="mini" @click="bank(scope.row,scope.row.uid,scope.row.name)">支持银行</el-button> -->
                <!-- <el-button size="mini" @click="shangyips(2,scope.row.uid,scope.row.agtType)">权益记录</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <!-- <div
            class="filter-container"
            style="
          padding-left: 40px;
          float: left;
          text-align: left;
          font-size: 16px;
          color: rgb(31, 165, 243);
          cursor: pointer;
          width: auto;
        "
          >
            <el-checkbox v-model="checkedAll">全选</el-checkbox>
          </div> -->
           <el-button
          @click="back"
          class="filter-container"
          style="margin-left:20px;float: left; text-align: left; font-size: 16px; color: rgb(31, 165, 243); cursor: pointer; width: auto"
        >
          返回
        </el-button> 
          <div style="clear: both"></div>

          <el-pagination
            style="text-align: right;flat:right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[ 20, 50 , 100]"
            :page-size="form.number"
            layout="total, sizes, prev, pager, next, jumper"
            :total="bankNum"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      no: "12458",
      tableData: [
        {
          master: "交易",
          uid: "1568974125"
        }
      ],
      bankNum: "", //支持银行数量
      checkedAll: false,
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      totalNum: 0, //总页数
      //查询列表数据
      form: {
        page: 1,
        number: 10,
        channelNo: "",
        channelName: "",
        channelType: "",
        status: "",
        agtType: "1"
      },
      officeUid: "",
      oemUid: ""
    };
  },
  created() {
    let infos = this.$route.query.businessInfo;
    this.infos1=JSON.parse(infos);
    // console.log(this.$route.query.officeUid);
    //通道编号
    this.form.channelNo = this.$route.query.channelNo;
    //通道名称
    this.form.channelName = this.$route.query.channelName;
    //officeuid
    this.officeUid = this.$route.query.officeUid;
    //oemuid
    this.oemUid = this.$route.query.oemUid;
    //agtType
    this.form.agtType = this.$route.query.agtType;
    //officeUid
    this.form.officeUid = this.$route.query.officeUid;

    console.log(this.form.channelNo, this.form.channelName);
    //通道类型
    // let channelType = val.channelType
    // console.log()
    // console.log(this.form)
    this.getListData();
  },
  methods: {
    back(){
      this.$router.push({name:"business",
      query:{
        businessInfo: JSON.stringify(this.infos1)
      }})
    },
    //获取列表数据
    getListData() {
      console.log(this.form);
      // return
      axios
        .post("/api/bus/queryBankByChannelCode", this.form)
        .then(res => {
          console.log("请求成");
          console.log(res);
          this.tableData = res.data.data;
          this.bankNum = res.data.bankNum;
          // alert(res.data.data.)
        })
        .catch(err => {
          console.log("请求失败");
          console.log(err);
        });
    },
    list(val) {
      this.form.status = val;
      this.getListData();
    },

    // 开通业务
    opening() {
      let agtType = this.$route.query.agtType;
      this.$router.push({
        path: "addBank",
        query: {
          channelCode: this.form.channelNo,
          agtType: agtType,
          officeUid: this.officeUid,
          oemUid: this.oemUid
        }
      });
    },
    handleSizeChange(val) {
      this.form.number = val; //动态改变
    },
    handleCurrentChange(val) {
      this.form.page = val; //动态改变
      this.getListData();
    },
    // 支持银行
    bank(val) {
      console.log(val);
      this.$router.push({
        path: "supportingBank",
        query: {
          officeUid: this.$route.query.officeUid,
          uid: val.uid
        }
      });
    },
    handleEdit(val, valId, valNum) {
      // alert(val.id)
      let agtType = this.$route.query.agtType;
      this.$router.push({
        path: "addBank",
        query: {
          channelCode: this.form.channelNo,
          id: val.id,
          disb: "y",
          channelCode: this.form.channelNo,
          agtType: agtType,
          officeUid: this.officeUid,
          oemUid: this.oemUid
        }
      });
    }
  }
};
</script>
<style scoped>
.con {
  position: relative;
  /* padding: 20px; */
  /* display: flex;
    flex-direction: column */
}
.contbox6_10 {
  width: 100%;
  /* min-height: 10px;
  margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.nav {
  float: left;
  width: 100%;
  padding: 20px;
  /* height: 200px; */
  /* border: 1px #000 solid; */
}
.nav_son {
  width: 100%;
  padding: 0 20px 20px 0;
}
.nav_son1 {
  width: 100%;
  /* float: left; */
  /* display: flex; */
}
.nav_son span {
  margin-right: 20px;
  color: #000;
}
.tables {
  width: 100%;
  float: left;
}
.el-button--primary {
  height: 32px;
  line-height: 10px;
}
</style>
